<template>
  <div class="block">
    <div class="flex">
      <div :class="showCellIds ? 'func-active' : 'func'" @click="connect">
        <img src="../../assets/new.svg" alt="" class="icon" />
        <span class="func-name">连接引擎</span>
      </div>
      <div class="fill"></div>
      <div :class="showCellIds ? 'func-active' : 'func'" @click="clear">
        <img src="../../assets/new.svg" alt="" class="icon" />
        <span class="func-name">清除工作区</span>
      </div>
      <div class="fill"></div>
      <div :class="showCellIds ? 'func-active' : 'func'" @click="saveProject">
        <img src="../../assets/save.svg" alt="" class="icon" />
        <span class="func-name">保存arp</span>
      </div>
      <div class="fill"></div>
      <div :class="showCellIds ? 'func-active' : 'func'" @click="loadProject">
        <img src="../../assets/loadFile.svg" alt="" class="icon" />
        <span class="func-name">导入arp</span>
      </div>
      <div class="fill"></div>
      <div :class="showCellIds ? 'func-active' : 'func'" @click="inputFile">
        <img src="../../assets/loadFile.svg" alt="" class="icon" />
        <span class="func-name">导入模型</span>
      </div>
      <div class="fill"></div>
      <div :class="showCellIds ? 'func-active' : 'func'" @click="exportFile">
        <img src="../../assets/exportFile.svg" alt="" class="icon" />
        <span class="func-name">导出bdf</span>
      </div>
      <div class="fill"></div>
      <div
        :class="showCellIds ? 'func-active' : 'func'"
        @click="exportModelFile"
      >
        <img src="../../assets/exportFile.svg" alt="" class="icon" />
        <span class="func-name">导出其他</span>
      </div>
    </div>

    <div class="title">通用</div>
    <Modal
      :title="'导入arp工程文件'"
      hide-mask
      transfer
      draggable
      v-model:active="showImportArp"
      @confirm="handleLoadProjectConfirm"
    >
      <Upload allow-drag manual @change="handleFileChange"></Upload>
    </Modal>
  </div>
</template>
<script lang="ts" setup>
import { defineProps, ref } from "vue";
import { Modal, Upload, UploadFileState } from "cax-ui";
import { useCoreStore, _global } from "@/UI/store";
import { useRoute } from "vue-router";
import { storeToRefs } from "pinia";
import { useSaveToLocal } from "@/UI/composables/useSaveProject";
import { IO } from "stl-typescript";

const coreStore = useCoreStore();
const route = useRoute();
defineProps(["showCellIds"]);

const showImportArp = ref(false);
let importFileTemp = null;

function clear() {
  _global.Engine.clear();
}

function saveProject() {
  // if (!route.query.id) {
  //   Message.error("无唯一标识id: 无法保存");
  //   return;
  // }
  useSaveToLocal();
}

function loadProject() {
  showImportArp.value = true;
}

function inputFile() {
  coreStore.setImportModelVueActive(true);
}

function exportFile() {
  coreStore.setFileSaveModalActive(true);
}
function exportModelFile() {
  coreStore.setExportModalActive(true);
}

// 打开引擎连接窗口
function connect() {
  coreStore.setConnectModalActive(true);
}

async function handleLoadProjectConfirm() {
  if (importFileTemp) {
    await _global.Engine.project.load(importFileTemp);
    // 刷新BOM状态
    coreStore.setBomInfo(await _global.Engine.model.info());
    IO.emit("UpdateAllCards", 1);
  }
}

function handleFileChange(fileList: UploadFileState[]) {
  if (fileList.length >= 0) {
    importFileTemp = fileList[0].source;
  }
}
</script>
<style lang="less" scoped>
@import "../../styles/xxxTool.less";
</style>
